<template>
    <form method="post">
        <div style="width: 100%; overflow: hidden">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left"><font style="font-size: 25px; font-family: 微软雅黑">基本信息</font></div>
            <div style="width: 45.8%; height: 100%; float: left; text-align: right; margin-right: 5px">
                <font style="font-size: 20px; font-family: 微软雅黑; color: #356cb3">单位：万元、公顷</font>
            </div>
            <div style="width: 4%; height: 100%; float: right; text-align: right"></div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="项目名称" prop="proName" style="width: 96%">
                            <el-input v-model="ruleForm.proName" placeholder="请填写项目名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <!-- <el-col :span="12">
                        <el-form-item label="项目区位" prop="proLocation">
                            <el-input v-model="ruleForm.proLocation" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item label="项目状态" prop="proTypes">
                            <el-select v-model="ruleForm.proTypes" placeholder="请选择项目状态" style="width: 90%">
                                <el-option label="立项" :value="1"></el-option>
                                <el-option label="施工" :value="2"></el-option>
                                <el-option label="验收" :value="3"></el-option>
                                <!-- <el-option label="建设用地复垦" :value="4"></el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目开发总面积" prop="completedArea">
                            <el-input
                                v-model="ruleForm.completedArea"
                                placeholder="请填写数字"
                                style="width: 90%"
                                oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{4,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row> -->
                <!-- <el-col :span="12">
                        <el-form-item label="竣工新增旱地面积" prop="newLandArea">
                            <el-input v-model="ruleForm.newLandArea" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col> -->
                <!-- </el-row> -->
                <!-- <el-row>
                    <el-col :span="12">
                        <el-form-item label="竣工旱地改水田面积" prop="waterImprovementArea">
                            <el-input v-model="ruleForm.waterImprovementArea" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="竣工垦造水田面积" prop="paddyField">
                            <el-input v-model="ruleForm.paddyField" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="立项时间" prop="projectApproval">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.projectApproval"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="工期（天）" prop="completedTime">
                            <!-- <el-date-picker
                                type="date"
                                placeholder="选择工期"
                                v-model="ruleForm.completedTime"
                                style="width: 90%"
                            ></el-date-picker> -->
                            <el-input v-model.number="ruleForm.completedTime" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="业主设计单位" prop="implCompany">
                            <el-input v-model="ruleForm.implCompany" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属乡镇" prop="newLandArea">
                            <el-select v-model="ruleForm.newLandArea" placeholder="请选择乡镇" style="width: 90%">
                                <!-- 下拉选择框 -->
                                <el-option v-for="item in options" :key="item.streetName" :label="item.streetName" :value="item.streetName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="施工单位" prop="constructionUnit">
                            <el-select
                                v-model="ruleForm.constructionUnit"
                                filterable
                                placeholder="请选择施工单位"
                                style="width: 90%"
                                @change="SGhandleChange"
                            >
                                <!-- 下拉选择框 -->
                                <el-option v-for="item in SGlist" :key="item.id" :label="item.unitName" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="施工单位负责人" prop="functionary">
                            <el-select
                                filterable
                                placeholder="请选择施工单位负责人"
                                v-model="ruleForm.functionary"
                                style="width: 90%"
                                @change="SGFZR()"
                            >
                                <!-- 下拉选择框 -->
                                <el-option v-for="item in SGFZRlist" :key="item" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="监理单位" prop="supervisorCompany">
                            <el-select
                                v-model="ruleForm.supervisorCompany"
                                filterable
                                placeholder="请选择监理单位"
                                style="width: 90%"
                                @change="JLhandleChange"
                            >
                                <!-- 下拉选择框 -->
                                <el-option v-for="item in JLlist" :key="item.unitName" :label="item.unitName" :value="item.id"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="监理单位负责人" prop="supervising">
                            <el-select
                                v-model="ruleForm.supervising"
                                filterable
                                placeholder="请选择监理单位负责人"
                                style="width: 90%"
                                @change="JLFZR()"
                            >
                                <!-- 下拉选择框 -->
                                <el-option v-for="item in JLFZRlist" :key="item" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="改造前水田平均质量等级">
                            <el-input v-model="ruleForm.stAverageQuality" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="改造后水田平均质量等级">
                            <el-input v-model="ruleForm.laststAverageQuality" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目编号" prop="pronumber">
                            <el-input v-model="ruleForm.pronumber" placeholder="请填写数字" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="立项信息" prop="proInfo">
                            <el-input v-model="ruleForm.proInfo" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开工时间" prop="projectTime">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.projectTime"
                                style="width: 90%"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="立项文号" prop="proDocimentNumber">
                            <el-input v-model="ruleForm.proDocimentNumber" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="实施单位" prop="implementationUnit">
                            <el-input v-model="ruleForm.implementationUnit" placeholder="" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    
                </el-row>
                <!-- <el-row>
                    <el-form-item label="立项文件" prop="paddyField">
                        <el-upload
                            ref="upload"
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :on-success="uploadSuccess"
                            :on-error="uploadError"
                            :on-preview="handlePreview"
                            multiple
                            :limit="10"
                            :file-list="fileList"
                            trigger
                        >
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        </el-upload>

                        
                    </el-form-item>
                </el-row> -->
                <!-- <div id="asdaf" align="center" style="width:80%;"> -->

                <!-- <el-tabs type="border-card" id="id_tabs"> -->
                <!-- 计划投资信息 -->
                <!-- <el-tab-pane>
                        <span slot="label" class="tabPaneJhtz"><font class="lableFont"> 计划投资信息</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="总投资" prop="totalInvestment">
                                        <el-input v-model="ruleForm.totalInvestment" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="施工工程费用" prop="projectCost">
                                        <el-input v-model="ruleForm.projectCost" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他费用" prop="otherExpenses">
                                        <el-input v-model="ruleForm.otherExpenses" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="亩均投资" prop="mjInvestment">
                                        <el-input v-model="ruleForm.mjInvestment" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="资金来源" prop="sourceFunds">
                                        <el-input v-model="ruleForm.sourceFunds" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane> -->

                <!-- 计划建设信息 -->
                <!-- <el-tab-pane>
                        <span slot="label" class="tabPaneJhjs"><font class="lableFont"> 计划建设信息</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="计划建设总投资规模" prop="totalInvestmentScale">
                                        <el-input v-model="ruleForm.totalInvestmentScale" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="开发规模" prop="exploitation">
                                        <el-input v-model="ruleForm.exploitation" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="计划可用于占补平衡水面积" prop="space">
                                        <el-input v-model="ruleForm.space" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="jsxx_title">计划新增耕地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="新增耕地面积" prop="saveArea">
                                        <el-input v-model="ruleForm.saveArea" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="新增水田平均质量等级" prop="saveWaterArea">
                                        <el-input v-model="ruleForm.saveWaterArea" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="新增耕地中水田面积" prop="paddyArea">
                                        <el-input v-model="ruleForm.paddyArea" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="水田级别" prop="waterLevel">
                                        <el-input v-model="ruleForm.waterLevel" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane> -->

                <!-- 计划新增耕地 -->
                <!-- <el-tab-pane>
                        <span slot="label" class="tabPaneJhxz"><font class="lableFont"> 计划新增耕地</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            
                        </div>
                    </el-tab-pane> -->
                <!-- </el-tabs> -->
                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="saveOrUpdate()" class="bthNormal">保存</el-button>
                        <el-button @click="shutdown()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </form>
</template>

<script>
import project from '../../../../api/lx_infor/lx_infor';
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            // 所属乡镇数据
            options: [],
            // 施工单位
            SGlist: [],
            // 监理单位
            JLlist: [],
            // 监理单位负责人
            JLFZRlist: [],
            // 施工单位负责人
            SGFZRlist: [],
            ruleForm: {
                laststAverageQuality:'',
                proTypes: '',
                stAverageQuality: '',
                projectTime: '',
                proInfo: '',
                constructionId: '',
                supervisionId: '',
                implementationUnit: '',
                proDocimentNumber: '',
                startTime: '',
                proName: '',
                proLocation: '',
                proType: '',
                completedArea: '',
                newLandArea: '',
                waterImprovementArea: '',
                paddyField: '',
                projectApproval: '',
                completedTime: '',
                implCompany: '',
                constructionUnit: '',
                supervisorCompany: '',
                totalInvestment: '',
                dfzj: '',
                zyfcfy: '',
                dffcfy: '',
                ztz: '',
                projectCost: '',
                otherExpenses: '',
                mjInvestment: '',
                sourceFunds: '',
                totalInvestmentScale: '',
                exploitation: '',
                space: '',
                saveArea: '',
                saveWaterArea: '',
                paddyArea: '',
                waterLevel: '',
                functionary: '',
                supervising: '',
                newLandArea: '',
                status: '',
                streetName: '',
                // 项目编号
                pronumber: '',
                updateTime: '',
                createTime: ''
                // 上传文件的列表
            },
            fileList: [],
            rules: {
                proName: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' }
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                proLocation: [{ required: true, message: '请填写项目区位', trigger: 'change' }],
                //region: [{ required: true, message: '请填写所在县', trigger: 'change' }],
                proTypes: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
                // completedArea: [
                //     { required: true, validator: checkNum, trigger: 'blur' },
                //     { type: 'number', message: '必须为数字', trigger: 'blur' }
                // ],
                newLandArea: [{ required: true, validator: checkNum, trigger: 'blur' }],
                waterImprovementArea: [{ required: true, validator: checkNum, trigger: 'blur' }],
                // paddyField: [{ required: true, validator: checkNum, trigger: 'blur' }],
                projectApproval: [{ required: true, message: '请选择立项时间', trigger: 'change' }],
                completedTime: [
                    { required: true, message: '请填写工期时间', trigger: 'blur' },
                    { type: 'number', message: '必须为数字', trigger: 'blur' }
                ],
                // pronumber: [{ required: true, message: '请填写项目编号', trigger: 'blur' }],
                implCompany: [{ required: true, message: '请填写实施单位', trigger: 'change' }],

                // constructionUnit: [{ required: true, message: '请填写施工单位', trigger: 'change' }],
                // supervisorCompany: [{ required: true, message: '请填写监理', trigger: 'change' }],

                totalInvestment: [{ required: true, validator: checkNum, trigger: 'blur' }],
                projectCost: [{ required: true, validator: checkNum, trigger: 'blur' }],
                otherExpenses: [{ required: true, validator: checkNum, trigger: 'blur' }],
                mjInvestment: [{ required: true, validator: checkNum, trigger: 'blur' }],
                totalInvestmentScale: [{ required: true, validator: checkNum, trigger: 'blur' }],
                space: [{ validator: checkNum, trigger: 'blur' }],
                saveArea: [{ validator: checkNum, trigger: 'blur' }],
                paddyArea: [{ validator: checkNum, trigger: 'blur' }],
                // functionary: [{ required: true, message: '请选择施工单位负责人', trigger: 'change' }],
                // supervising: [{ required: true, message: '请选择监理单位负责人', trigger: 'change' }],
                newLandArea: [{ required: true, message: '请选择所属乡镇', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.init();
        this.getvillagesData();
        this.getJLunit();
        this.getSGunit();
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        // 读取上传文件
        handlePreview(file) {
            window.open(file.fileUrl);
        },
        // 时间转换
        dateConversion(value) {
            var d = new Date(value);
            var date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ';
            return date;
        },

        // 施工单位传值
        SGhandleChange(val) {
            var obj = {};
            obj = this.SGlist.find(function (item) {
                return item.id === val;
            });
            this.ruleForm.constructionUnit = obj.unitName;
            this.ruleForm.constructionId = val;
            project.getFZR(val).then((rep) => {
                // console.log(rep,22222222222222222222)
                if (rep.data.length == 0) {
                    this.SGFZRlist = [];
                    this.ruleForm.functionary = ' ';
                } else {
                    this.SGFZRlist = rep.data;
                }
            });
        },
        // 监理单位传值

        JLhandleChange(val) {
            var obj = {};
            obj = this.JLlist.find(function (item) {
                return item.id === val;
            });
            this.ruleForm.supervisorCompany = obj.unitName;
            this.ruleForm.supervisionId = val;
            project.getFZR(val).then((rep) => {
                // console.log(rep,111111111111111)
                if (rep.data.length == 0) {
                    this.JLFZRlist = [];
                    this.ruleForm.supervising = ' ';
                } else {
                    this.JLFZRlist = rep.data;
                }
            });
        },
        // 获取乡镇数据
        async getvillagesData() {
            const { data: res } = await this.$http.post('/project_library/portfolio/findAll');
            if (res.code != 20000) return this.$message.error('获取乡镇列表失败！');
            // console.log(res)
            this.options = res.data;
        },
        // 获取监理单位
        getJLunit() {
            project.getJLunit().then((rep) => {
                // console.log(rep)
                this.JLlist = rep.data;
                // console.log(this.JLlist)
            });
        },
        // 获取施工单位
        getSGunit() {
            project.getSGunit().then((rep) => {
                // console.log(rep)
                this.SGlist = rep.data;
                // console.log(this.SGlist)
            });
        },
        init() {
            //判断路径有id值,做修改
            if ($('#idframe', window.parent.document).attr('data-id') != 'undefined') {
                //从路径获取id值
                const id = $('#idframe', window.parent.document).attr('data-id');
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.ruleForm = {};
            }
        },
        // 保存
        saveOrUpdate() {
            // // 上传选择的附件
            // this.$refs.upload.submit()

            //判断修改还是添加
            // 是否有id
            if (!this.ruleForm.id) {
                //添加
                this.onSubmit();
            } else {
                //修改

                this.update();
            }
        },
        // 上传成功的回调函数
        uploadSuccess(res, file, fileList) {
            this.fileList = file.raw;
            console.log(this.fileList);
        },
        // 上传失败的回调函数
        uploadError(res, file, fileList) {
            console.log(fileList);
            this.$message.error(`文件：${file.name}上传失败！`);
        },
        // 验证是否为数字
        num(serialNumber) {
            var numReg = /^[0-9]*$/;
            var numRe = new RegExp(numReg);
            if (!numRe.test(serialNumber)) {
                return false;
            }
        },
        // 保存
        onSubmit() {
            if (this.ruleForm.completedTime != null) {
                if (this.num(this.ruleForm.completedTime) == false) {
                    this.$message({
                        type: 'warning',
                        message: '工期天数请按规范填写',
                        showClose: true
                    });
                    return;
                }
            }
            this.ruleForm.startTime = this.dateConversion(this.ruleForm.startTime);
            let form = new FormData();
            // information.save(this.projectinformation,this.unit,this.file,this.label)
            for (var item in this.ruleForm) {
                form.append(item, this.ruleForm[item]);
                // console.log(this.ruleForm)
            }
            form.append('files', this.fileList);
            console.log(this.fileList);
            project.save(form).then((response) => {
                // console.log(response);
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                setTimeout(() => {
                    $('#idcloseclick', parent.document).click();
                }, 1000);
            });
        },
        rTime(date) {
            var json_date = new Date(date).toJSON();
            return new Date(new Date(json_date) + 8 * 3600 * 1000)
                .toISOString()
                .replace(/T/g, ' ')
                .replace(/\.[\d]{3}Z/, '');
        },
        // 修改
        update() {
            this.ruleForm.updateTime = this.dateConversion(this.ruleForm.updateTime);
            this.ruleForm.createTime = this.dateConversion(this.ruleForm.createTime);
            this.ruleForm.startTime = this.dateConversion(this.ruleForm.startTime);
            var form = new FormData();
            // information.save(this.projectinformation,this.unit,this.file,this.label)

            for (var item in this.ruleForm) {
                form.append(item, this.ruleForm[item]);
            }
            form.append('files', this.fileList);
            project.updateInfo(form).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                setTimeout(() => {
                    $('#idcloseclick', parent.document).click();
                }, 1000);
            });
        },
        tonew() {
            this.ruleForm = {};
        },
        // 关闭
        shutdown() {
            $('#idcloseclick', parent.document).click();
            window.close();
        },
        // 获取信息
        getInfo(id) {
            project.openInfo(id).then((response) => {
                this.ruleForm = response.data.dto;
                this.fileList = response.data.files;
            });
        },
        // 上传附件
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
#id_tabs div.el-tabs__content {
    padding: 0;
}
.jsxx_title {
    font-family: '微软雅黑';
    color: #356cb3;
    font-size: 25px;
}

/* 上传组件样式 */
.upload-demo .el-upload {
    text-align: left;
}
.upload-demo .el-upload--text {
    border: none;
    width: 80px;
    height: 100%;
}
</style>